<template>
	<view style="position: relative;">
		<!-- 头部 -->
		<view class="titles">
			<image src="../../static/28a3b451f81986184a86281a4aed2e7389d4e6a0.jpg" style="width: 100%;" mode=""></image>
			<view class="title">
				<image class="returnh" src="../../static/iconfanhui.png" @tap="getBack"></image>
			</view>
			<view class="bg">
				<image class="imgs" src="../../static/icon122.png" mode=""></image>
				<image class="imgs" style="float: right;" src="../../static/iconxing.png" mode=""></image>
			</view>
		</view>
		<!-- 店铺 -->
		<view class="w345">
			<view class="w90">
				<image :src="Shop.avatar" mode=""></image>
				<view style="margin-left: 40rpx">
					<text class="fs16" style="font-weight: 700;">{{Shop.name}}</text>
					<view class="spans">
						<span></span>
						<text style="color: rgba(241,116,68,1);margin-left: 10rpx;">{{Shop.score}}</text>
						<text style="color: rgba(136,136,136,1);margin-left: 10rpx;">月售{{Shop.month_sales}}</text>
						<text style="position: absolute;right: 40rpx;color: rgba(136,136,136,1);">{{Shop.distance}}
							{{Shop.minutes}}分钟</text>
					</view>
					<text class="fs10" style="color: rgba(136,136,136,1);">起送价￥{{Shop.send_price}}
						配送费￥{{Shop.shopping_fee}}</text>
				</view>
			</view>
			<!-- 活动 -->
			<view class="w90 fs10" style="padding:10rpx 40rpx;margin: 0 auto;color: rgba(235,116,74,1);">
				<span style="display: inline-block;padding: 8rpx 0;">活动：</span>
				<text v-for="(item,idx) in Shop.activity">{{item.title}}</text>
			</view>
			<!-- 优惠券 -->
			<view class="w90 mjian" style="display: flex; padding: 0;">
				<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
				<view v-for="(item,idx) in YHJ" :key="idx" @click="Limqu(item.id)" style="position: relative;">
					<view :class="item.is_usable==0?'ccc':''"></view>
					<view class="">
						<span style="font-size: 16rpx;color: rgba(240,116,69,1);">￥</span>
						<span style="font-size: 42rpx;color: rgba(240,116,69,1);">{{item.money}}</span>
						<text style="font-size: 24rpx;color: rgba(240,116,69,1);padding: 0 30rpx;">{{item.title}}</text>
						<text class="mjlq fs10" @click="showTips(idx)">领取</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="fs12"
			style="width: 690rpx;height: 34rpx;margin: 0 auto;margin-top: 90rpx;color: rgba(136,136,136,1);">
			公告：{{Shop.notice[0].content}}
		</view>
		<!-- 商品 -->
		<view class="sdgg fs16">
			<u-sticky>
				<view class="sticky" style="display: flex;">
					<view :class="nums==0?'select':''" @click="showp(0)"> 商品 </view>
					<view :class="nums==1?'select':''" @click="showp(1)"> 评价 <text class="fs12">120</text> </view>
					<view :class="nums==2?'select':''" @click="showp(2)"> 商家 </view>
				</view>
			</u-sticky>
		</view>
		<!-- 商品点餐 -->
		<view class="btm fs13" v-if="nums==0">
			<!-- 菜品种类 -->
			<view class="btm-left">
				<view v-for="(item,index) in Commodity" :key="index" @click="setid(index,item.id)"
					:class="num == item.id?'select1':''">
					{{item.name}}
				</view>
			</view>
			<!-- 菜品 -->
			<view class="btm-right">
				<scroll-view :scroll-y="true" style="white-space: nowrap;height: 500px;" :scroll-into-view="clickId"
					:scroll-with-animation="true" @scroll="scroll" @scrolltolower="scrolltolower ">
					<view v-for="(item,index) in Commodity" :key="index">
						<view style="background-color: rgba(0,0,0,0.5);color: #FFFFFF;" :id="'po'+index">{{item.name}}
						</view>
						<view class="pitchOn" v-for="(itm,idx) in item.goods" @click="Taocan(itm.id)">
							<image :src="itm.image"></image>
							<view style="margin-left: 20rpx;">
								<text class="fs13"
									style="display: inline-block;color: rgba(51,51,51,1);font-weight: 700;">{{itm.name}}</text><br>
								<text class="fs11" style="color: #999999;">已售 {{itm.sales}}</text><br>
								<span style="font-size: 16rpx;color: rgba(240,116,69,1);">￥</span>
								<span style="font-size: 42rpx;color: rgba(240,116,69,1);">{{itm.market_price}}</span>
								<text
									style="margin-left:20rpx;color:color:rgba(174,174,174,1);text-decoration:line-through;">￥{{itm.original_price}}</text>
							</view>
							<!-- 判断是否邀请拼团 -->
							<i class="center" v-if="itm.is_spell_group">
								<navigator url="../Dindan/QRdingdan2/QRdingdan2">邀请拼团</navigator>
							</i>
							<!-- 判断是否存在规格 -->
							<text class="center" v-if="itm.is_sku" @click.stop="pops(itm)">选规格</text>
							<!--  -->
							<view v-else class="centerss">
								<i class="img-left" @click.stop="senddata(2,itm,itm.id)"></i>
								<text>{{itm.cart_num}}</text>
								<i class="img-right" @click.stop="senddata(1,itm,itm.id)"></i>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 选择规格 -->
			<u-mask :show="show" @click="show = false">
				<view class="warp">
					<view class="centers" @tap.stop>
						<h3 class="fs15" style="text-align: center;padding-top:30rpx">{{guige.name}}</h3>
						<view class="drtc fs12" v-for="(item,index) in guige.sku">
							<text> {{item.key}} </text>
							<view>
								<text :class="data_arr.some( function( ie, index, array ){ 
								return ie.value == item.values[idx].value; 
							})?'green':''" v-for="(val,idx) in item.values" @click="selectc(item,idx)">{{val.value}}</text>
							</view>
						</view>
						<view class="w80">
							<view class="w80left">
								<text class="fs12">总计：</text>
								<text class="fs12" style="color: #FE401E;">￥</text>
								<text class="fs16" style="color: #FE401E;">16.6</text>
							</view>
							<view class="w80right fs12" @click="senddata(1,selectsp,selectsp.id)">
								加购
							</view>
						</view>
					</view>
				</view>
			</u-mask>
		</view>
		<!-- 商品评价 -->
		<view class="btm" v-else-if="nums==1">
			商品评价
		</view>
		<!-- 商品商家 -->
		<view class="btm" v-else-if="nums==2">
			商品商家
		</view>
		<!-- 底部购买 -->
		<view style="height: 180rpx;"></view>
		<view class="pobtms">
			<view class="center" style="height: 62rpx;background: rgba(254,253,225,1);line-height: 62rpx;">
				<text>{{boughttitle}}</text>
			</view>
			<!-- 购物车 -->
			<view class="safe-area-inset-bottom" style="position:fixed">
				<u-popup mode="bottom" v-model="shows" @close="aa">
					<view class="" style="width: 100%;height: 800rpx;">
						<scroll-view scroll-y="true">
							<view>
								<view class=" fixed" style="top: 0;background:rgba(250,250,250,1);">
									<view class="center" style="height: 62rpx;background: rgba(254,253,225,1);">
										{{boughttitle}}
									</view>
									<view class="yxshangpin" style="height: 62rpx;">
										<text class="fs16" style="font-weight: 600;">已选商品</text>
										<view class="shanchuimg fs13" @click="Delete(2,id)">
											<image src="../../static/iconde.png" mode=""></image>
											<text style="color: #888;margin-left: 10rpx;">清空</text>
										</view>
									</view>
								</view>
								<view style="height: 130rpx;"></view>
								<view v-for="(item,index) in bought" :key="item">
									<view class="yxshangpin" style="display: flex;">
										<image :src="item.goods_image" mode=""></image>
										<view class="shangpinrt" style="position: relative;">
											<view class="fs13" style="font-weight: 600;padding: 10rpx 0;">
												{{item.goods_name}}
											</view>
											<view class="fs11" v-for="(itm,idx) in item.sku">
												{{itm.value}}
											</view>
											<view class="yxbtm fs12">
												<text style="color: red;">总价:{{item.total_fee}}</text>
												<text>单价{{item.goods_price}}</text>
												<text>包装{{item.package_price}}</text>
											</view>
											<view class="centerss">
												<i class="img-left" @click="senddata(2,item,item.goods_id)"></i>
												<text>{{item.cart_num}}</text>
												<i class="img-right" @click="senddatas(1,item,item.goods_id)"></i>
											</view>
										</view>
									</view>
								</view>
								<view style="height: 110rpx;"></view>
								<view class="fixed" style="bottom: 0;height: 110rpx;background: #FFFFFF;"></view>
							</view>
						</scroll-view>
					</view>
				</u-popup>
			</view>
			<!--  -->
			<view class="pobtm">
				<view class="poleft">
					<!-- <u-button @click="shows = true;"> -->
					<image style="width: 68rpx;height: 58rpx;padding: 12rpx 44rpx;" src="../../static/icon8.png" mode=""
						@click="GWche"></image>
					<!-- </u-button> -->
					<view class="rednum center">
						{{boughtnum}}
					</view>
					<view class="text33">
						<text calss="fs16s">{{boughtjiage}}</text><text class="fs12"
							style="margin-left: 20rpx;text-decoration:line-through;">￥28.8</text><br>
						<text class="fs10">配送费￥2</text>
					</view>
				</view>
				<view class="poright center">
					<navigator @click="jiesuan">去结算</navigator>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import HHdrtc from "./drtaocan/drtaocan"
	import TaoCan from "./Taocan/Taocan"
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			HHdrtc,
			TaoCan
		},
		data() {
			return {
				show: false,
				shows: false,
				drtc: false,
				id: 0, //店铺id
				selectsp: [], //选择商品
				Shop: {}, //店铺信息
				YHJ: {}, //优惠券
				Commodity: {},
				num: 0,
				select: 0,
				_sky: {},
				guige: [],
				SCROLLY: 0,
				clickId: "",
				change: 0,
				topList: [],
				isLeftClick: false,
				nums: 0,
				data_arr: [],
				bought: [], //以购商品
				boughtnum: 0, //以购商品数量
				boughttitle: '', //满减详情
				boughtjiage: '', //以购商品总价
				youhuijuanid: {}, //优惠卷id
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44
			}
		},
		onLoad(options) {
			this.id = options.id * 1
			this.qingkong()
			this.getyhj()
			this.getdata(options.id)
			this.getNodesInfo();
		},
		methods: {
			aa() {
				this.getdata(this.id)
			},
			getBack() {
				uni.navigateBack()
			},
			showp(seck) {
				this.nums = seck
			},
			// 领优惠卷
			Limqu(idx) {
				console.log(idx)
				this.$request('api/user/coupons/get', {
					coupons_id: idx,
				}, "GET", {
					Authorization: this.token
				}).then(res => {
					console.log(res)
				})
			},
			// 获取此店铺优惠卷
			getyhj() {
				this.$request('api/store/coupons/' + this.id, {
					token: this.token
				}, "GET", {}).then(res => {
					console.log(res)
					this.YHJ = res.data
				})
			},
			// 提示领取优惠卷
			showTips(idx) {
				if (this.YHJ.is_usable) {
					this.$refs.uTips.show({
						title: '优惠卷领取成功',
						type: 'success'
					});
				} else {
					this.$refs.uTips.show({
						title: '已领取',
						type: 'error '
					});
				}

			},
			getdata(id) {
				this.$request('api/store/' + id, {
					token: this.token,
					latitude: this.latitude,
					longitude: this.longitude
				}, 'GET', {}).then(res => {
					this.Shop = res.data.info.store
					this.Commodity = res.data.info.menu
					this._sky = this.Commodity[0].goods[0].sku
					this.youhuijuanid = res.data.info.store.coupons
					console.log(res.data.info.store)
				})
			},
			pops(itm) {
				this.show = true
				this.$request('api/store/goods/' + itm.id, {}, "GET", {}).then(res => {
					this.guige = res.data.detail
					this.selectsp = itm
				})
			},
			senddatas(num, item, id){
				if (num == 1) {
					item.cart_num++
					this.$request('api/cart/join', {
						store_id: this.id, //店铺ID
						goods_id: id, //商品ID
						type: num, //
						sku: JSON.stringify(item.sku)
					}, "POST", {
						Authorization: this.token
					}).then(res => {
						console.log('商品数据发送成功', res)
					})
					this.qingkong()
				}
			},
			senddata(num, item, id) {
				console.log(item)
				this.show = false
				if (num == 1) {
					item.cart_num++
					this.$request('api/cart/join', {
						store_id: this.id, //店铺ID
						goods_id: id, //商品ID
						type: num, //
						sku: JSON.stringify(this.data_arr)
					}, "POST", {
						Authorization: this.token
					}).then(res => {
						console.log('商品数据发送成功', res)
					})
					this.qingkong()
					this.data_arr = []
				}
				if (num == 2) {
					item.cart_num--
					this.$request('api/cart/join', {
						store_id: this.id, //店铺ID
						goods_id: id, //商品ID
						type: num, //
						sku: JSON.stringify(item.sku)
					}, "POST", {
						Authorization: this.token
					}).then(res => {
						console.log('商品数据发送成功', res)
					})
					this.qingkong()
				}
			},
			// 以购商品
			GWche(id) {
				console.log(this.id)
				this.shows = !this.shows
				this.qingkong()
			},
			jiesuan() {
				uni.navigateTo({
					url: '../Dindan/QRdingdan/QRdingdan?id=' + this.id + '&num=' + this.boughtnum
				})
			},
			qingkong() {
				this.$request('api/store/cart/' + this.id, {}, "GET", {
					Authorization: this.token
				}).then(res => {
					// console.log(res)
					this.bought = res.data.list
					this.boughtnum = res.data.cart_num
					this.boughtjiage = res.data.goods_fee
					this.boughttitle = res.data.discount_msg
				})
			},
			// 清空所选商品
			Delete(num, id) {
				this.$request('api/cart/clear', {
					type: num,
					id: id
				}, "DELETE", {
					Authorization: this.token
				}).then(res => {
					console.log(res)
				})
				this.GWche(id)
			},
			// 跳转详情
			Taocan(id) {
				uni.navigateTo({
					url: './Taocan/Taocan?id=' + id,
				});
			},
			// 点击 跳转
			setid(i, id) {
				this.num = id;
				this.clickId = "po" + i;
				this.change = i;
				this.isLeftClick = true;
			},
			scroll(e) {
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				// 只能变前第三个，最后一个到不了底部，只能用滚动到底部事件
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop > h1 && scrollTop < h2) {
						this.change = i;
					}
				}
			},
			// 滚动到底部
			scrolltolower() {
				setTimeout(() => {
					this.change = 3;
				}, 80)
			},
			getNodesInfo() {
				//小程序没有doucument和window对象(undefined)
				const query = uni.createSelectorQuery().in(this);
				query.selectAll(".title").boundingClientRect().exec(res => {
					let nodes = res[0];
					let arr = [];
					nodes.map(item => {
						arr.push(item.top);
					})
					this.topList = arr;
				})
			},
			selectc(item, idx) {
				var data = {};
				data.key = item.key;
				data.price = item.values[idx].price;
				data.value = item.values[idx].value;
				this.data_arr.push(data)
				this.distinct(this.data_arr);
			},
			distinct(arr) {
				for (let i = 0, len = arr.length; i < len; i++) {
					for (let j = i + 1; j < len; j++) {
						if (arr[i].key == arr[j].key) {
							arr.splice(i, 1);
							// splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一
							len--;
							j--;
						}
					}
				}
				return arr;
			}
		},
		computed: {
			...mapState(['token', 'longitude', 'latitude'])
		}
	}
</script>

<style lang="scss" scoped>
	.yxshangpin {
		width: 90%;
		margin: auto;
		padding: 20rpx 0;
	}

	.yxshangpin>image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 20rpx;
	}

	.shangpinrt {
		margin-left: 20rpx;
		width: 80%;
	}

	.shanchuimg {
		float: right;
	}

	.shanchuimg>image {
		width: 16rpx;
		height: 20rpx;
	}

	.ccc {
		background: rgba(0, 0, 0, 0.8) !important;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
	}

	.yxbtm {
		position: absolute;
		bottom: 0;
	}

	.titles {
		width: 100%;
		height: 306rpx;
		position: relative;
	}

	.content {
		padding: 24rpx;
		width: 200rpx;
		height: 500rpx;
		text-align: center;
		background-color: #FFFFFF;
	}

	.rednum {
		padding: 5rpx 10rpx;
		border-radius: 5rpx;
		background-color: #FF3951;
		transform: scale(0.8);
		position: absolute;
		left: 42px;
		top: 5px;
	}

	.title {
		position: absolute;
		top: 0;
	}

	.fixed {
		width: 100%;
		line-height: 62rpx;
		position: fixed;
		z-index: 999;
	}

	.mjlq {
		display: inline-block;
		width: 76rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		background: linear-gradient(157deg, #f9a067 0%, #ff6942 100%);
		border-radius: 10px;
		color: #FFFFFF;
	}

	.returnh {
		position: absolute;
		left: 20rpx;
		top: 60rpx;
	}

	.bg {
		width: 132rpx;
		height: 58rpx;
		position: absolute;
		right: 50rpx;
		top: 140rpx;
	}

	.w345 {
		width: 690rpx;
		height: 312rpx;
		margin: -68rpx auto;
		background: #FFFFFF;
		border-radius: 8px;
		box-shadow: 0px 3px 6px 0px rgba(190, 190, 190, 0.15);
		position: relative;
	}

	.w90 {
		width: 90%;
		display: flex;
		padding: 25rpx 38rpx 0;
	}

	.w90>text {
		display: inline-block;
		padding: 8rpx 18rpx;
		border-radius: 18rpx;
		border: 1px solid rgba(251, 191, 170, 1);
		margin-right: 20rpx;
	}

	.w90>image {
		width: 104rpx;
		height: 106rpx;
	}

	.spans {
		width: 100%;
		height: 28rpx;
		line-height: 28rpx;
		font-size: 20rpx;
	}

	.spans>span {
		display: inline-block;
		width: 18rpx;
		height: 18rpx;
		background: rgba(241, 116, 68, 1);
		margin-top: 3rpx;

	}

	.mjian {
		margin: 0 auto;

	}

	.mjian>view {
		width: 45%;
		height: 72rpx;
		line-height: 72rpx;
		margin: 0 15rpx;
		background: url(../../static/icon？.png);
	}

	.sdgg {
		width: 100%;
		border-bottom: 1px solid rgba(235, 235, 235, 1);
	}

	.sticky view {
		width: 20%;
		text-align: center;
		padding: 35rpx 20rpx;
		color: rgba(132, 132, 132, 1);
	}

	.select {
		display: inline-block;
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(51, 51, 51, 1);
		border-bottom: 5rpx solid rgba(36, 188, 129, 1);
	}

	.btm {
		width: 100%;
		height: 1040rpx;
		display: flex;
		margin-top: 20rpx;
	}

	.btm-left {
		width: 166rpx;
		height: 1000rpx;
		overflow: scroll;
	}

	.btm-left>view {
		width: 100%;
		height: 104rpx;
		padding: 30rpx 15rpx;
		text-align: justify;
		text-justify: newspaper;
		word-break: break-all;
		text-align: center;
		background: #F8F8F8;
	}

	.btm-left>view>i {
		width: 26rpx;
		height: 26rpx;
		display: inline-block;
		background: url(../../static/icon2.png);
		margin-right: 15rpx;
	}

	.btm-right {
		width: 70%;
		height: 1000rpx;
		margin-left: 30rpx;
		overflow: scroll;
	}

	.select1 {
		color: rgba(255, 105, 49, 1);
		background: #FFFFFF !important;
	}

	.pitchOn {
		width: 100%;
		height: 200rpx;
		padding: 20rpx 0;
		display: flex;
		position: relative;
	}

	.pitchOn>image {
		width: 144rpx;
		height: 136rpx;
		padding: 15rpx 0;
	}

	.pitchOn>i {
		display: inline-block;
		width: 138rpx;
		height: 42rpx;
		position: absolute;
		bottom: 0;
		right: 150rpx;
		color: rgba(36, 188, 129, 1);
		border: 1rpx solid rgba(36, 188, 129, 1);
		border-radius: 24rpx;
		font-style: normal;
	}

	.pitchOn>text {
		width: 108rpx;
		height: 48rpx;
		background: rgba(36, 188, 129, 1);
		color: #FFFFFF;
		border-radius: 24rpx;
		line-height: 48rpx;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.centerss {
		width: 120rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		text-align: center;
		line-height: 30rpx;
	}

	.img-left {
		width: 36rpx;
		height: 36rpx;
		background: url(../../static/icon-.png);
		background-position: 0 -84px;
		position: absolute;
		left: 0rpx;
		top: 0;
	}

	.img-right {
		width: 36rpx;
		height: 36rpx;
		background: url(../../static/icon+.png);
		position: absolute;
		right: 0;
		top: 0;
	}

	.pobtms {
		width: 100%;
		height: 172rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}

	.pobtm {
		width: 686rpx;
		height: 90rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		margin: 10rpx auto;
		display: flex;
		overflow: hidden;
	}

	.poleft {
		width: 492rpx;
		height: 90rpx;
		background: rgba(36, 188, 129, 1);
		position: relative;
		line-height: 30rpx;
		color: #FFFFFF;
	}

	.poright {
		width: 194rpx;
		height: 90rpx;
		background: #FFCB57;
		position: relative;
		font-weight: 700;
		color: #333333;
	}

	.text33 {
		position: absolute;
		left: 130rpx;
		top: 10rpx;
	}

	.green {
		color: rgba(36, 188, 129, 1);
		background: rgba(36, 188, 129, 0.2);
	}

	.centers {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translateX(-50%);
		z-index: 99;
	}

	.drtc {
		margin: 30rpx 40rpx;
	}

	.drtc>text {
		color: rgba(164, 164, 164, 1);
	}

	.drtc>view {
		margin-top: 20rpx;
	}

	.drtc>view>text {
		display: inline-block;
		width: 130rpx;
		margin: 10rpx;
		padding: 10rpx 15rpx;
		border: 1rpx solid rgba(223, 223, 223, 1);
		text-align: center;
	}

	.w80 {
		width: 85%;
		height: 60rpx;
		margin: 80rpx auto;
		display: flex;
		position: relative;
	}

	.w80right {
		border-radius: 10rpx;
		width: 120rpx;
		padding: 8rpx;
		background: rgba(36, 188, 129, 1);
		text-align: center;
		color: #FFFFFF;
		position: absolute;
		right: 0;
		top: 0;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
</style>
